<template>
  <div class="media_topic">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left" class="left_btn" @click="$router.go(-1)"/>
      <span>话题空间</span>
      <div  v-if="!($store.state.device === 'APP' || $store.state.gsign === 'qxym')"  class="btn_right">
        <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
        <a href="javascript:;">
          <img src="../../../assets/img/modules/media/icon_25.png" alt="">
          <img class="active" src="../../../assets/img/modules/media/icon_26.png" alt="">
        </a>
      </div>
    </div>
    <div :class="$store.state.device !== 'APP'?'topic_banner' : 'topic_banner app_nav'">
<!--      <img src="../../../assets/img/modules/media/icon_02.png" alt="">-->
      <div class="left_text" style="margin: 0">
        <h4 v-if="articleList.length > 0"># {{articleList[0].postTagName}}</h4>
        <p>在就读期间，成绩优异，专业知识扎实，容丰富，结合热点事件、经典案例…</p>
      </div>
    </div>
    <div class="tab_list">
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <div v-for="(item, index) in articleList" :key="item.userId + ' ' + index">
          <!-- 是大V 没有图片 -->
          <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount === 0" class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 是大V 一张图片 -->
          <div v-if="item.isV === 2 && item.imageCount === 1"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
              <img :src="item.images[0]" alt="">
            </a>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 是大V 多张图片 -->
          <div v-if="item.isV === 2 && item.imageCount > 1" class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img src="../../../assets/img/modules/media/icon_34.png" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <div class="img_list">
                  <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                </div>
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 是大V 视屏 -->
          <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount !== 0" class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img src="../../../assets/img/modules/media/icon_34.png" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 没有图片 -->
          <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount === 0"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 一张图片 -->
          <div v-if="item.isV === 1 && item.imageCount === 1"   class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
              <img :src="item.images[0]" alt="">
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 多张图片 -->
          <div v-if="item.isV === 1 && item.imageCount > 1"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <div class="img_list">
                  <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                </div>
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 视屏 -->
          <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount !== 0"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-video', query:{ videoUrl: item.videos, id: item.post.id }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
        </div>
        <!--加载状态-->
        <div v-for="item in 4" :key="item">
          <van-skeleton
              title
              style="margin-top: 30px"
              avatar
              :row="4"
              :loading="loading">
          </van-skeleton>
        </div>
        <div v-if="footerShow" class="no_data_title">
          <p>没有更多</p>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
  name: 'media_topic',
  components: {},
  data () {
    return {
      id: 0,
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      articleList: [],
      footerShow: false, // 底部标志显示
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {},
  methods: {
    getTopicList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpposts/getPostsList?wpTermsId=${this.id}&current=${this.current}&size=${this.size}&openid=${this.$store.state.openid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        res.data.forEach(item => {
          this.articleList.push(item)
        })
        this.loading = false
      }).catch(() => {})
    },
    onLoad: debounce(function () {
      this.getTopicList()
      this.current = this.current + 1
    }, 100, { 'leading': true, 'trailing': false })
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')
    this.id = this.$route.query.id
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .media_topic {
    .nav_top_list{
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          img{
            width: 36px;
            height: 34px;
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .topic_banner{
      width: 750px;
      height: 260px;
      margin:  100px auto 0;
      padding: 66px 32px;
      display: flex;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      background: #F8F8F8;
      .left_text{
        margin-left: 30px;
        h4{
          font-size: 36px;
          color: #222222;
          margin: 0;
        }
        p{
          font-size: 24px;
          color: #666666;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      img{
        width: 140px;
        height: 140px;
        display: block;
        border-radius: 15px;
      }
    }
    .item_news{
      padding: 32px 32px 20px;
      border-bottom: 15px solid #f6f6f6;
      background-color: #ffffff;
      &:last-child{
        border: 0;
      }
      .top_img{
        display: flex;
        font-size: 32px;
        color: #222222;
        align-items: center;
        margin-bottom: 20px;
        img{
          width: 70px;
          height: 70px;
          border-radius: 70px;
          box-shadow: 0 0 5px rgba(0,0,0,0.1);
          margin-right: 20px;
        }
      }
      .text_body{
        display: flex;
        img{
          width: 218px;
          height: 164px;
          border-radius: 4px;
          margin-left: 20px;
        }
        .right_text{
          display: flex;
          flex-direction: column;
          align-content: space-between;
          justify-content: space-between;
          h5{
            font-size: 32px;
            color: #222222;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 0;
            line-height: 45px;
          }
          p{
            font-size: 28px;
            color: #666666;
            margin: 5px 0;
            line-height: 35px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .img_list{
            display: flex;
            img{
              width: 218px;
              height: 164px;
              &:first-child{
                margin: 0;
              }
            }
          }
        }
      }
      .footer_body{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .time_body{
          font-size: 24px;
          color: #999999;
          a{
            font-size: 24px;
            color: #027FFE;
            margin-right: 20px;
          }
        }
        .right_body{
          font-size: 24px;
          color: #999999;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .item_span{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: 30px;
            margin-left: 10px;
            img{
              margin-right: 5px;
            }
            &:nth-child(1){
              img{
                width: 28px;
                height: 28px;
              }
            }
            &:nth-child(2){
              img{
                width: 30px;
                height: 28px;
              }
            }
            &:nth-child(3){
              img{
                width: 30px;
                height: 26px;
              }
            }
          }
        }
      }
    }
    .item_video{
      padding: 32px 32px 20px;
      border-bottom: 15px solid #f6f6f6;
      background-color: #ffffff;
      &:last-child{
        border: 0;
      }
      .top_img{
        display: flex;
        font-size: 32px;
        color: #222222;
        align-items: center;
        margin-bottom: 20px;
        img{
          width: 70px;
          height: 70px;
          border-radius: 70px;
          box-shadow: 0 0 5px rgba(0,0,0,0.1);
          margin-right: 20px;
        }
      }
      .text_body{
        display: flex;
        .right_text{
          display: flex;
          flex-direction: column;
          align-content: space-between;
          justify-content: space-between;
          h5{
            font-size: 32px;
            color: #222222;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 0;
            line-height: 45px;
          }
        }
        .video_body{
          width: 686px;
          height: 346px;
          position: relative;
          margin-top: 10px;
          .video_bg{
            width: 686px;
            height: 346px;
          }
          .video_play{
            background-color: rgba(0,0,0,0.6);
            width: 110px;
            height: 110px;
            border-radius: 110px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            .video_btn{
              width: 33px;
              height: 45px;
              position: absolute;
              left: 55%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .footer_body{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .time_body{
          font-size: 24px;
          color: #999999;
          a{
            font-size: 24px;
            color: #027FFE;
            margin-right: 20px;
          }
        }
        .right_body{
          font-size: 24px;
          color: #999999;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .item_span{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: 30px;
            margin-left: 10px;
            img{
              margin-right: 5px;
            }
            &:nth-child(1){
              img{
                width: 28px;
                height: 28px;
              }
            }
            &:nth-child(2){
              img{
                width: 30px;
                height: 28px;
              }
            }
            &:nth-child(3){
              img{
                width: 30px;
                height: 26px;
              }
            }
          }
        }
      }
    }
    .footer_title{
      margin: 100px auto;
      text-align: center;
      img{
        width: 594px;
        height: 71px;
      }
    }
  }
</style>
